import React, { Component } from 'react';
import './Classify.scss'
import { NavBar } from 'antd-mobile';
import myaxios from '../../utils/myaxios'
import axios from 'axios'
import { withRouter } from 'react-router-dom'
import SearchInput from '../../components/searchInput/searchInput'
class Classify extends Component {
  constructor(props) {
    super(props)
    const CancelToken = axios.CancelToken;
    this.source = CancelToken.source();
  }
  state = {
    leftList: [], // 返回的菜单数据
    rightList: [], // 右边菜单渲染的内容
    select_index: 0, // 当前选中左边菜单的项
  }
  //获取分类菜单的数据
  getCategories = (params) => {
    myaxios.get('categories',{
      cancelToken:this.source.token
    }).then((res) => {
      this.setCategories(res)
    }).catch((err) => { console.log(err) })
  }
  //设置分类菜单的数据  
  // is_storage 是否已经缓存过
  setCategories = (res, is_storage) => {
    //缓存请求的数据
    let categories_cache = {}
    if (!is_storage) {
      console.log(1)
      categories_cache = {
        date: Date.now(),
        categories: res
      }
      localStorage.setItem("categories_cache", JSON.stringify(categories_cache))
    }
    this.setState({
      leftList: res,
      rightList: res[0].children
    })
  }


  componentDidMount() {

    let categories_cache = localStorage.getItem('categories_cache')
    // 如果本地缓存不为空
  
    // console.log(categories_cache.date)
    if (categories_cache && JSON.parse(categories_cache).date) {
      // 判断本地缓存是否过期
      //当前时间
      let current_time = Date.now()
      // 存储的时间
      let storage_time = JSON.parse(categories_cache).date
      if (current_time - storage_time > 60 * 60 * 1000) {
        // 缓存一小时过期
        console.log(1)
        this.getCategories()
      } else {
        // 缓存没有过期                                     //代表是否缓存过
        this.setCategories(JSON.parse(categories_cache).categories, true)
      }

    } else {
      this.getCategories()
    }


  }
  componentWillUnmount() {
    this.source.cancel("取消分类菜单的请求");
  }
  // 左侧点击切换内容
  handleClick = (e) => {
    let select_index = e.target.getAttribute('data-index')
    // console.log(this.state.select_index)
    // console.log( e.target.getAttribute('data-index'))
    this.setState({
      select_index: parseInt(select_index),
      rightList: this.state.leftList[select_index].children
    })
  }
  //右侧点击商品跳转商品列表
  handleProduct = (e) => {
    let cid = e.target.getAttribute("data-index")
    this.props.history.push("/productList?cid=" + cid)
  }
  render() {

    return (
      <div className='yg-classify'>
        {/* 顶部导航开始 */}
        <div className='classify-nav'>
          <NavBar className='classify-nav-content'>优购商城</NavBar>
        </div>
        {/* 顶部导航结束 */}
        {/* 分类搜索框开始 */}
        <div className='searchInput'>
          <SearchInput></SearchInput>
        </div>
        {/* 首页搜索框结束 */}
        {/* 分类主体开始 */}
        <div className='yg-classify-content'>

          <div className='classify-content-left' onClick={this.handleClick}>
            {
              this.state.leftList.map((v, i) => {
                return <div data-index={i} key={v.cat_id} className='content-left-item'>
                  <span data-index={i} className={this.state.select_index === i ? "active" : ""}>{v.cat_name}</span>
                </div>
              })
            }
          </div>

          <div className='classify-content-right'>
            {
              this.state.rightList.map((v, i) => {
                return (
                  <div key={v.cat_id} className='content-right-item'>
                    {/* 右边标题开始 */}
                    <div className='content-right-title'>
                      {'/'}{v.cat_name}{'/'}
                    </div>
                    {/* 右边标题结束 */}
                    {/* 内容区开始 */}
                    <div className='content-right-product' onClick={this.handleProduct}>
                      {
                        v.children && v.children.map((v, i) => {
                          return (
                            <div key={v.cat_id} className='right-product-item'>
                              <img data-index={v.cat_id} src={v.cat_icon} alt="" />
                              <span data-index={v.cat_id}>{v.cat_name}</span>
                            </div>
                          )
                        })
                      }
                    </div>
                    {/* 内容区结束 */}
                  </div>
                )

              })
            }

          </div>
        </div>
        {/* 分类主体结束 */}
      </div>
    );
  }
}

export default withRouter(Classify);